import React,{useState,useEffect,useLayoutEffect} from 'react';
import {
    StyleSheet,
    View,
    ScrollView,
    FlatList,
    Text,
    Image,
    TouchableOpacity
} from 'react-native';
import '../../features/Phone';

const renderItem = (item, navigation) => {
    return (
        <TouchableOpacity
            activeOpacity={0.8}
            onPress={()=>{navigation.navigate('Perfume',{item: item})}}
        >
            <View
                key={item.nose_id}
                style={{
                    width: w*0.9,
                    marginTop: 30,
                    flexDirection: 'row'
                }}
            >
                <View
                    style={{
                        width: p2d(210), 
                        height: p2d(210),
                        backgroundColor: 'white',
                        borderWidth: 1,
                        borderColor: 'lightgray',
                        justifyContent: 'center',
                        alignItems: 'center',
                        marginRight: 20,
                    }}
                >
                    <Image 
                        source={{uri:item.nose_logo}}
                        style={{width:p2d(60), height:p2d(120)}}
                    />
                </View>
                <View style={{width: w*0.9-p2d(210)-20}}>
                    <Text style={{fontSize:15}}>{item.nose_name}</Text>
                    <Text style={{
                        fontSize:12,
                        marginTop: 5,
                        marginBottom: 5
                    }}>
                        {item.nose_score}分 {item.nose_num}人评价
                    </Text>
                    <Text style={{fontSize:12}}>前调：{item.nose_topTone}</Text>
                    <Text style={{fontSize:12}}>中调：{item.nose_middleTone}</Text>
                    <Text style={{fontSize:12}}>后调：{item.nose_afterTone}</Text>
                </View>
            </View>
        </TouchableOpacity>
    )
};

const Typec = ({route,navigation}) => {
    const named = route.params.name;
    const id = route.params.id;
    const [data,setData] = useState([]);
    
    useLayoutEffect(() => {
        navigation.setOptions({
            title: named+'系列香水',
        })
    }, []);
    useEffect(()=>{
        fetch('http://175.27.190.73:9000/classify/'+id)
            .then(res=>res.json())
            .then(res=>{
                setData(res.nose);
            })
    },[]);

    return (
        <View style={{width:w, backgroundColor:'#f0f0f0', alignItems:'center'}}>
            <FlatList
                data={data}
                showsVerticalScrollIndicator={false}
                keyExtractor={(item) => item.nose_id}
                renderItem={({item})=>{
                    return renderItem(item,navigation);
                }}
            />
        </View>
    )
}

export default Typec
